<template>
	<view class="container">
		<!-- iOS风格顶部导航 -->
		<view class="ios-top-nav">
			<view class="status-bar"></view>
			<view class="nav-content">
				<text class="nav-title">课程中心</text>
				<view class="nav-actions">
					<view class="action-btn ai" @tap="navigateToAI">
						<image src="/static/tabbar/ai.png" mode="aspectFit"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 日期显示 -->
			<view class="date-header">
				<view class="current-date">
					<text class="date-value">{{formatDate(currentDate)}}</text>
					<text class="date-day">{{formatDay(currentDate)}}</text>
				</view>
				<view class="date-action" @tap="showCalendar">
					<text>日历</text>
					<image src="/static/icons/calendar.png" mode="aspectFit"></image>
				</view>
			</view>
			
			<!-- 日历弹窗 -->
			<view v-if="showCalendarPopup" class="calendar-popup">
				<view class="calendar-header">
					<text>课程日历</text>
					<view class="close-btn" @tap="hideCalendar">
						<image src="/static/icons/close.png" mode="aspectFit"></image>
					</view>
				</view>
				<view class="calendar-content">
					<!-- 月份选择器 -->
					<view class="month-selector">
						<view class="month-arrow" @tap="changeMonth(-1)">
							<image src="/static/icons/arrow-left.png" mode="aspectFit"></image>
						</view>
						<text class="current-month">{{formatMonth(currentDate)}}</text>
						<view class="month-arrow" @tap="changeMonth(1)">
							<image src="/static/icons/arrow-right.png" mode="aspectFit"></image>
						</view>
					</view>
					
					<!-- 星期标题 -->
					<view class="weekdays-header">
						<text v-for="(day, index) in ['日','一','二','三','四','五','六']" :key="index" class="weekday-title">{{day}}</text>
					</view>
					
					<!-- 日历网格 -->
					<view class="calendar-grid">
						<view 
							v-for="(day, index) in calendarDaysGrid" 
							:key="index" 
							class="calendar-day"
							:class="{ 
								'empty': !day, 
								'active': day && isDateSelected(day.date),
								'today': day && isToday(day.date),
								'has-schedule': day && hasSchedule(day.date)
							}"
							@tap="day && selectDate(day.date)">
							<text v-if="day" class="day-number">{{day.day}}</text>
							<view v-if="day && hasSchedule(day.date)" class="schedule-dot"></view>
						</view>
					</view>
					
					<!-- 日期滚动条 -->
					<view class="quick-dates">
						<text class="quick-title">快速选择：</text>
						<scroll-view scroll-x class="date-scroller">
							<view 
								v-for="(day, index) in nextTwoWeeksDays" 
								:key="index" 
								class="date-item" 
								:class="{ 
									'active': isDateSelected(day.date),
									'today': isToday(day.date)
								}"
								@tap="selectDate(day.date)">
								<text class="weekday">周{{day.weekday}}</text>
								<text class="day-number">{{day.day}}</text>
								<text class="month-number">{{day.month}}月</text>
							</view>
						</scroll-view>
					</view>
					
					<!-- 底部操作按钮 -->
					<view class="calendar-actions">
						<view class="action-button ghost" @tap="hideCalendar">
							<text>取消</text>
						</view>
						<view class="action-button primary" @tap="goToToday">
							<text>今天</text>
						</view>
						<view class="action-button primary" @tap="confirmDate">
							<text>确定</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 今日课程 -->
			<view class="ios-section">
				<view class="section-header">
					<text class="ios-subheader">今日课程</text>
					<text class="view-more" @tap="showCalendar">查看更多</text>
				</view>
				<view class="schedule-list">
					<view v-if="todaySchedule.length === 0" class="empty-schedule">
						<image src="/static/icons/empty-schedule.png" mode="aspectFit"></image>
						<text>今日暂无课程安排</text>
					</view>
					<view class="schedule-item" v-for="(item, index) in todaySchedule" :key="index">
						<view class="schedule-time-container">
							<view class="schedule-time">
								<text class="time-text">{{item.startTime}} - {{item.endTime}}</text>
								<view class="time-line"></view>
							</view>
						</view>
						<view class="schedule-card">
							<view class="schedule-info">
								<view class="schedule-header">
									<text class="schedule-title">{{item.courseName}}</text>
									<view class="schedule-tag" v-if="item.isLive">
										<text>直播中</text>
									</view>
								</view>
								<text class="schedule-location">{{item.location}}</text>
								<text class="schedule-teacher">{{item.teacher}}</text>
							</view>
							<view class="schedule-action">
								<view class="action-button primary" @tap="joinCourse(item)">
									<text>进入课堂</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 作业上传 -->
			<view class="ios-section">
				<view class="section-header">
					<text class="ios-subheader">待提交作业</text>
					<text class="view-more">全部作业</text>
				</view>
				<view class="homework-list">
					<view v-if="homeworks.length === 0" class="empty-homework">
						<image src="/static/icons/empty-homework.png" mode="aspectFit"></image>
						<text>当前没有待提交的作业</text>
					</view>
					<view class="homework-item" v-for="(item, index) in homeworks" :key="index">
						<view class="homework-content">
							<text class="homework-title">{{item.title}}</text>
							<text class="homework-course">{{item.courseName}}</text>
							<view class="homework-deadline">
								<image src="/static/icons/time.png" mode="aspectFit"></image>
								<text>截止日期: {{item.deadline}}</text>
							</view>
						</view>
						<view class="homework-action">
							<view class="action-button primary" @tap="uploadHomework(item)">
								<text>上传作业</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 快速功能区 -->
			<view class="ios-section">
				<view class="section-header">
					<text class="ios-subheader">学习画像分析</text>
					<text class="view-more" @tap="navigateTo('/pages/student-analytics/student-analytics')">查看详情</text>
				</view>
				<view class="analytics-overview">
					<!-- 能力雷达图简要显示 -->
					<view class="mini-radar-chart">
						<image src="/static/analytics/radar-chart-mini.png" mode="aspectFit"></image>
					</view>
					
					<!-- 简要能力指标 -->
					<view class="ability-overview">
						<view class="ability-item" v-for="(item, index) in abilityOverview" :key="index">
							<view class="ability-dot" :style="{ backgroundColor: item.color }"></view>
							<view class="ability-info">
								<text class="ability-name">{{item.name}}</text>
								<view class="ability-bar">
									<view class="ability-progress" :style="{ width: item.value + '%', backgroundColor: item.color }"></view>
								</view>
							</view>
							<text class="ability-score">{{item.score}}</text>
						</view>
					</view>
					
					<!-- 学习建议 -->
					<view class="analytics-suggestion">
						<view class="suggestion-icon">
							<image src="/static/analytics/suggestion-icon.png" mode="aspectFit"></image>
						</view>
						<view class="suggestion-content">
							<text class="suggestion-title">学习建议</text>
							<text class="suggestion-text">根据你的学习数据，建议优先提升创造力，可尝试参加相关辅助课程</text>
						</view>
						<view class="suggestion-arrow" @tap="navigateTo('/pages/student-analytics/student-analytics')">
							<image src="/static/icons/arrow-right.png" mode="aspectFit"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentDate: new Date(),
				showCalendarPopup: false,
				calendarDaysGrid: [],
				nextTwoWeeksDays: [],
				todaySchedule: [
					{
						courseName: "高等数学",
						startTime: "08:00",
						endTime: "09:40",
						location: "教学楼B-305",
						teacher: "李明教授",
						isLive: true
					},
					{
						courseName: "大学英语",
						startTime: "10:10",
						endTime: "11:50",
						location: "教学楼A-210",
						teacher: "王丽老师",
						isLive: false
					},
					{
						courseName: "数据结构",
						startTime: "14:30",
						endTime: "16:10",
						location: "教学楼C-510",
						teacher: "张伟教授",
						isLive: false
					}
				],
				homeworks: [
					{
						title: "第三章习题",
						courseName: "高等数学",
						deadline: "2023-06-10 23:59"
					},
					{
						title: "英语作文",
						courseName: "大学英语",
						deadline: "2023-06-12 23:59"
					}
				],
				abilityOverview: [
					{
						name: "专注力",
						score: "8.5",
						value: 85,
						color: "#007AFF"
					},
					{
						name: "记忆力",
						score: "7.8",
						value: 78,
						color: "#5AC8FA"
					},
					{
						name: "创造力",
						score: "6.7",
						value: 67,
						color: "#FF9500"
					}
				]
			}
		},
		onLoad() {
			this.generateCalendarGrid();
			this.generateNextTwoWeeks();
		},
		methods: {
			formatDate(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				const day = date.getDate();
				return `${year}年${month}月${day}日`;
			},
			formatDay(date) {
				const days = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
				return days[date.getDay()];
			},
			formatMonth(date) {
				const year = date.getFullYear();
				const month = date.getMonth() + 1;
				return `${year}年${month}月`;
			},
			showCalendar() {
				this.showCalendarPopup = true;
				this.generateCalendarGrid();
				this.generateNextTwoWeeks();
			},
			hideCalendar() {
				this.showCalendarPopup = false;
			},
			generateCalendarGrid() {
				const days = [];
				const date = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), 1);
				const lastDay = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth() + 1, 0).getDate();
				
				// 填充本月第一天之前的空白
				const firstDayOfWeek = date.getDay();
				for (let i = 0; i < firstDayOfWeek; i++) {
					days.push(null);
				}
				
				// 填充本月的日期
				for (let i = 1; i <= lastDay; i++) {
					const currentDate = new Date(this.currentDate.getFullYear(), this.currentDate.getMonth(), i);
					days.push({
						date: currentDate,
						day: i,
						weekday: ['日', '一', '二', '三', '四', '五', '六'][currentDate.getDay()],
						month: currentDate.getMonth() + 1
					});
				}
				
				// 填充本月最后一天之后的空白，使总数为42（6行7列）
				const remaining = 42 - days.length;
				for (let i = 0; i < remaining; i++) {
					days.push(null);
				}
				
				this.calendarDaysGrid = days;
			},
			generateNextTwoWeeks() {
				const days = [];
				const today = new Date();
				
				// 生成未来两周的日期
				for (let i = 0; i < 14; i++) {
					const date = new Date();
					date.setDate(today.getDate() + i);
					days.push({
						date: new Date(date),
						weekday: ['日', '一', '二', '三', '四', '五', '六'][date.getDay()],
						day: date.getDate(),
						month: date.getMonth() + 1
					});
				}
				
				this.nextTwoWeeksDays = days;
			},
			isDateSelected(date) {
				return date.getDate() === this.currentDate.getDate() && 
					   date.getMonth() === this.currentDate.getMonth() &&
					   date.getFullYear() === this.currentDate.getFullYear();
			},
			isToday(date) {
				const today = new Date();
				return date.getDate() === today.getDate() && 
					   date.getMonth() === today.getMonth() &&
					   date.getFullYear() === today.getFullYear();
			},
			hasSchedule(date) {
				// 模拟判断该日期是否有课程安排
				// 在实际应用中，应该检查真实数据
				return date.getDay() !== 0 && date.getDay() !== 6; // 周一到周五有课
			},
			selectDate(date) {
				this.currentDate = date;
				// 实际应用中，这里应该根据选择的日期获取相应的课程安排
			},
			confirmDate() {
				// 确认日期选择，关闭日历并更新课程列表
				this.hideCalendar();
				// 这里可以调用API获取所选日期的课程
				uni.showToast({
					title: `已选择${this.formatDate(this.currentDate)}`,
					icon: 'none'
				});
			},
			goToToday() {
				this.currentDate = new Date();
				this.generateCalendarGrid();
			},
			changeMonth(delta) {
				const newDate = new Date(this.currentDate);
				newDate.setMonth(newDate.getMonth() + delta);
				this.currentDate = newDate;
				this.generateCalendarGrid();
			},
			joinCourse(course) {
				uni.showToast({
					title: `正在进入${course.courseName}课堂`,
					icon: 'none'
				});
				uni.navigateTo({
					url: `/pages/course/course?courseName=${encodeURIComponent(course.courseName)}&teacher=${encodeURIComponent(course.teacher)}&location=${encodeURIComponent(course.location)}&isLive=${course.isLive}`
				});
			},
			uploadHomework(homework) {
				uni.navigateTo({
					url: '/pages/homework-upload/homework-upload'
				});
			},
			navigateTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			navigateToAI() {
				this.navigateTo('/pages/ai-chat/ai-chat');
			}
		}
	}
</script>

<style lang="scss">
.container {
	height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--ios-light-bg, #F2F2F7);
	position: relative;
}

/* iOS顶部导航栏 */
.ios-top-nav {
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	border-bottom: 0.5px solid var(--ios-separator, rgba(60, 60, 67, 0.1));
	position: sticky;
	top: 0;
	z-index: 100;
	
	.status-bar {
		height: var(--status-bar-height, 20px);
	}
	
	.nav-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 16px;
		min-height: 44px;
	}
	
	.nav-title {
		font-size: 17px;
		font-weight: 600;
		color: #000;
	}
	
	.nav-actions {
		display: flex;
		
		.action-btn {
			width: 32px;
			height: 32px;
			border-radius: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-left: 8px;
			background-color: rgba(0, 0, 0, 0.03);
			
			image {
				width: 20px;
				height: 20px;
			}
			
			&:active {
				background-color: rgba(0, 0, 0, 0.05);
			}
		}
	}
}

/* 主内容区域 */
.main-content {
	flex: 1;
	position: relative;
	height: calc(100vh - var(--status-bar-height, 20px) - 54px); 
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	
	&::-webkit-scrollbar {
		width: 4px;
	}
	
	&::-webkit-scrollbar-thumb {
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 2px;
	}
	
	&::-webkit-scrollbar-track {
		background: transparent;
	}
}

/* 日期头部 */
.date-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px;
	
	.current-date {
		.date-value {
			font-size: 18px;
			font-weight: 600;
			color: #000;
			display: block;
		}
		
		.date-day {
			font-size: 14px;
			color: #666;
			margin-top: 4px;
		}
	}
	
	.date-action {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--ios-blue, #007AFF);
		padding: 4px 10px;
		border-radius: 14px;
		min-width: 70px;
		height: 28px;
		
		text {
			color: #FFFFFF;
			font-size: 13px;
			line-height: 1;
			display: flex;
			align-items: center;
		}
		
		image {
			width: 14px;
			height: 14px;
			display: flex;
			align-items: center;
			margin-left: 4px;
		}
	}
}

/* 日历弹窗 */
.calendar-popup {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 1000;
	display: flex;
	flex-direction: column;
	
	.calendar-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 16px;
		background-color: var(--ios-card-bg, #FFFFFF);
		border-bottom: 0.5px solid var(--ios-separator, rgba(60, 60, 67, 0.1));
		
		text {
			font-size: 17px;
			font-weight: 600;
		}
		
		.close-btn {
			width: 32px;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 16px;
				height: 16px;
			}
		}
	}
	
	.calendar-content {
		flex: 1;
		background-color: var(--ios-card-bg, #FFFFFF);
		padding: 16px;
		display: flex;
		flex-direction: column;
		
		.month-selector {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 16px;
			
			.current-month {
				font-size: 18px;
				font-weight: 600;
				color: #000;
			}
			
			.month-arrow {
				width: 36px;
				height: 36px;
				border-radius: 18px;
				background-color: rgba(0, 0, 0, 0.03);
				display: flex;
				align-items: center;
				justify-content: center;
				
				image {
					width: 16px;
					height: 16px;
				}
				
				&:active {
					background-color: rgba(0, 0, 0, 0.05);
				}
			}
		}
		
		.weekdays-header {
			display: flex;
			margin-bottom: 8px;
			
			.weekday-title {
				flex: 1;
				text-align: center;
				font-size: 13px;
				color: #8e8e93;
				padding: 8px 0;
			}
		}
		
		.calendar-grid {
			display: flex;
			flex-wrap: wrap;
			margin-bottom: 16px;
			
			.calendar-day {
				width: calc(100% / 7);
				height: 46px;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;
				
				.day-number {
					font-size: 15px;
					font-weight: 500;
					color: #000;
				}
				
				.schedule-dot {
					width: 4px;
					height: 4px;
					border-radius: 2px;
					background-color: var(--ios-blue, #007AFF);
					margin-top: 2px;
				}
				
				&.empty {
					pointer-events: none;
				}
				
				&.active {
					.day-number {
						width: 30px;
						height: 30px;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: var(--ios-blue, #007AFF);
						color: #FFFFFF;
						border-radius: 15px;
					}
				}
				
				&.today:not(.active) {
					.day-number {
						width: 30px;
						height: 30px;
						display: flex;
						align-items: center;
						justify-content: center;
						border: 1px solid var(--ios-blue, #007AFF);
						color: var(--ios-blue, #007AFF);
						border-radius: 15px;
					}
				}
			}
		}
		
		.quick-dates {
			margin-bottom: 16px;
			
			.quick-title {
				font-size: 14px;
				font-weight: 500;
				margin-bottom: 10px;
				display: block;
			}
			
			.date-scroller {
				display: flex;
				white-space: nowrap;
				
				.date-item {
					display: inline-flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 60px;
					height: 80px;
					margin-right: 8px;
					border-radius: 10px;
					background-color: rgba(0, 0, 0, 0.03);
					
					&.active {
						background-color: var(--ios-blue, #007AFF);
						
						.weekday, .day-number, .month-number {
							color: #FFFFFF;
						}
					}
					
					&.today:not(.active) {
						border: 1px solid var(--ios-blue, #007AFF);
						
						.day-number {
							color: var(--ios-blue, #007AFF);
						}
					}
					
					.weekday {
						font-size: 12px;
						color: #666;
						margin-bottom: 4px;
					}
					
					.day-number {
						font-size: 20px;
						font-weight: 600;
						color: #000;
					}
					
					.month-number {
						font-size: 10px;
						color: #8e8e93;
						margin-top: 4px;
					}
				}
			}
		}
		
		.calendar-actions {
			margin-top: auto;
			display: flex;
			justify-content: flex-end;
			
			.action-button {
				margin-left: 10px;
				
				&.ghost {
					background-color: transparent;
					border: 1px solid var(--ios-separator, rgba(60, 60, 67, 0.2));
					
					text {
						color: #000;
					}
				}
			}
		}
	}
}

/* 内容区域部分 */
.ios-section {
	margin-bottom: 20px;
	padding: 0 16px;
	
	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12px;
	}
	
	.ios-subheader {
		font-size: 17px;
		font-weight: 600;
		color: #000;
	}
	
	.view-more {
		font-size: 14px;
		color: var(--ios-blue, #007AFF);
	}
}

/* 课程表样式 */
.schedule-list {
	.empty-schedule {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
		
		image {
			width: 60px;
			height: 60px;
			margin-bottom: 12px;
			opacity: 0.5;
		}
		
		text {
			color: #8e8e93;
			font-size: 14px;
		}
	}
	
	.schedule-item {
		display: flex;
		margin-bottom: 16px;
		
		.schedule-time-container {
			width: 80px;
			padding-right: 12px;
			position: relative;
			
			.schedule-time {
				display: flex;
				flex-direction: column;
				align-items: center;
				
				.time-text {
					font-size: 12px;
					color: #8e8e93;
					text-align: center;
				}
				
				.time-line {
					position: absolute;
					top: 24px;
					bottom: 0;
					width: 2px;
					background-color: rgba(0, 122, 255, 0.2);
					right: 12px;
				}
			}
		}
		
		.schedule-card {
			flex: 1;
			background-color: var(--ios-card-bg, #FFFFFF);
			border-radius: var(--ios-border-radius, 10px);
			padding: 12px;
			box-shadow: var(--ios-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.05));
			display: flex;
			
			.schedule-info {
				flex: 1;
				
				.schedule-header {
					display: flex;
					align-items: center;
					margin-bottom: 8px;
					
					.schedule-title {
						font-size: 16px;
						font-weight: 600;
						color: #000;
						margin-right: 8px;
					}
					
					.schedule-tag {
						background-color: #FF3B30;
						border-radius: 4px;
						padding: 2px 6px;
						
						text {
							color: #FFFFFF;
							font-size: 10px;
						}
					}
				}
				
				.schedule-location, .schedule-teacher {
					font-size: 13px;
					color: #8e8e93;
					display: block;
					margin-bottom: 4px;
				}
			}
			
			.schedule-action {
				padding-left: 12px;
				display: flex;
				align-items: center;
				
				.action-button {
					padding: 6px 12px;
				}
			}
		}
	}
}

/* 作业列表样式 */
.homework-list {
	.empty-homework {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40px 0;
		
		image {
			width: 60px;
			height: 60px;
			margin-bottom: 12px;
			opacity: 0.5;
		}
		
		text {
			color: #8e8e93;
			font-size: 14px;
		}
	}
	
	.homework-item {
		background-color: var(--ios-card-bg, #FFFFFF);
		border-radius: var(--ios-border-radius, 10px);
		padding: 16px;
		box-shadow: var(--ios-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.05));
		margin-bottom: 12px;
		display: flex;
		
		.homework-content {
			flex: 1;
			
			.homework-title {
				font-size: 16px;
				font-weight: 600;
				color: #000;
				margin-bottom: 4px;
				display: block;
			}
			
			.homework-course {
				font-size: 14px;
				color: #8e8e93;
				margin-bottom: 8px;
				display: block;
			}
			
			.homework-deadline {
				display: flex;
				align-items: center;
				
				image {
					width: 14px;
					height: 14px;
					margin-right: 4px;
				}
				
				text {
					font-size: 12px;
					color: #FF3B30;
				}
			}
		}
		
		.homework-action {
			padding-left: 12px;
			display: flex;
			align-items: center;
			
			.action-button {
				padding: 6px 12px;
			}
		}
	}
}

/* 学习画像分析 */
.analytics-overview {
	background-color: var(--ios-card-bg, #FFFFFF);
	border-radius: var(--ios-border-radius, 10px);
	padding: 16px;
	box-shadow: var(--ios-card-shadow, 0 1px 2px rgba(0, 0, 0, 0.05));
	
	.mini-radar-chart {
		display: flex;
		justify-content: center;
		margin-bottom: 16px;
		
		image {
			width: 100%;
			height: 140px;
			object-fit: contain;
		}
	}
	
	.ability-overview {
		margin-bottom: 20px;
		
		.ability-item {
			display: flex;
			align-items: center;
			margin-bottom: 12px;
			
			.ability-dot {
				width: 8px;
				height: 8px;
				border-radius: 4px;
				margin-right: 8px;
			}
			
			.ability-info {
				flex: 1;
				
				.ability-name {
					font-size: 13px;
					color: #333;
					margin-bottom: 4px;
					display: block;
				}
				
				.ability-bar {
					height: 4px;
					background-color: rgba(0, 0, 0, 0.05);
					border-radius: 2px;
					overflow: hidden;
					
					.ability-progress {
						height: 100%;
						border-radius: 2px;
					}
				}
			}
			
			.ability-score {
				width: 30px;
				font-weight: 500;
				text-align: right;
				margin-left: 8px;
			}
		}
	}
	
	.analytics-suggestion {
		display: flex;
		align-items: center;
		padding: 12px;
		background-color: rgba(0, 122, 255, 0.05);
		border-radius: 8px;
		
		.suggestion-icon {
			width: 36px;
			height: 36px;
			border-radius: 18px;
			background-color: rgba(0, 122, 255, 0.1);
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 12px;
			
			image {
				width: 20px;
				height: 20px;
			}
		}
		
		.suggestion-content {
			flex: 1;
			
			.suggestion-title {
				font-size: 14px;
				font-weight: 500;
				color: #007AFF;
				margin-bottom: 2px;
				display: block;
			}
			
			.suggestion-text {
				font-size: 12px;
				color: #666;
				line-height: 1.4;
			}
		}
		
		.suggestion-arrow {
			width: 24px;
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: center;
			
			image {
				width: 16px;
				height: 16px;
				opacity: 0.3;
			}
		}
	}
}

/* 按钮样式 */
.action-button {
	border-radius: 10px;
	text-align: center;
	padding: 12px 20px;
	transition: all 0.2s ease;
	
	&.primary {
		background-color: var(--ios-blue, #007AFF);
		
		text {
			color: #FFFFFF;
			font-size: 15px;
			font-weight: 500;
		}
		
		&:active {
			opacity: 0.9;
		}
	}
}

/* 暗黑模式适配 */
@media (prefers-color-scheme: dark) {
	.container {
		background-color: #1a1a1a;
	}
	
	.main-content {
		&::-webkit-scrollbar-thumb {
			background-color: rgba(255, 255, 255, 0.2);
		}
	}
	
	.ios-top-nav {
		background-color: rgba(28, 28, 30, 0.85);
		border-bottom: 0.5px solid var(--ios-separator, rgba(255, 255, 255, 0.15));
		
		.nav-title {
			color: #FFFFFF;
		}
		
		.nav-actions .action-btn {
			background-color: rgba(255, 255, 255, 0.1);
		}
	}
	
	.date-header .current-date {
		.date-value {
			color: #FFFFFF;
		}
		
		.date-day {
			color: #AAAAAA;
		}
	}
	
	.calendar-popup .calendar-content {
		background-color: #2c2c2e;
		
		.month-selector .current-month {
			color: #FFFFFF;
		}
		
		.month-selector .month-arrow {
			background-color: rgba(255, 255, 255, 0.1);
		}
		
		.calendar-grid .calendar-day .day-number {
			color: #FFFFFF;
		}
		
		.calendar-grid .calendar-day.today:not(.active) .day-number {
			color: var(--ios-blue, #007AFF);
		}
		
		.quick-dates .date-scroller .date-item .day-number {
			color: #FFFFFF;
		}
		
		.calendar-actions .action-button.ghost {
			border-color: rgba(255, 255, 255, 0.2);
			
			text {
				color: #FFFFFF;
			}
		}
	}
	
	.ios-subheader {
		color: #FFFFFF;
	}
	
	.schedule-card, .homework-item {
		background-color: #2c2c2e;
	}
	
	.schedule-card .schedule-info .schedule-title,
	.homework-item .homework-content .homework-title {
		color: #FFFFFF;
	}
	
	.analytics-overview {
		background-color: #2c2c2e;
		
		.ability-overview .ability-item {
			.ability-name {
				color: #ddd;
			}
			
			.ability-info .ability-bar {
				background-color: rgba(255, 255, 255, 0.1);
			}
			
			.ability-score {
				color: #fff;
			}
		}
		
		.analytics-suggestion {
			background-color: rgba(0, 122, 255, 0.15);
			
			.suggestion-text {
				color: #aaa;
			}
		}
	}
}
</style>
